<template>
<view class="content">
	<view class="logo flex-rcc">
		<image src="/static/logo.png"></image>
	</view>
	
	<view class="formBox">
		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
			<u-form-item label="" prop="username">
				<u--input v-model="form.username" type="text" shape="circle" placeholder="请输入您的账号" class="inputBox" clearable></u--input>
			</u-form-item>
			<u-form-item label="" prop="password">
				<u--input v-model="form.password" type="password" shape="circle" placeholder="请输入您的密码" class="inputBox" clearable></u--input>
			</u-form-item>
			<!-- <u-form-item label="" prop="activation_code" v-if="!isLogin">
				<u--input v-model="form.activation_code" shape="circle" placeholder="请输入卡密" class="inputBox inputBox1" clearable></u--input>
			</u-form-item> -->
		</u--form>
	</view>
	<u-button 
		type="primary" 
		size="large" 
		text="立即登录" 
		:disabled="isLoading" 
		shape="circle" 
		loadingText="登录中..." 
		:loading="isLoading" 
		@click="submitLogin"
	></u-button>
</view>
</template>

<script setup>
// import { login } from '@/api'
import { useUserStore } from '@/stores'

const user = useUserStore()
const uForm = ref()
const form = reactive({
	username: '',
	password: '',
})
const rules = reactive({
	username: [
		{
			required: true,
			message: '请输入您的账号',
			trigger: ['blur', 'change']
		}
	],
	password: [
		{
			required: true,
			message: '请输入您的密码',
			trigger: ['blur', 'change']
		}
	],
})
const isLoading = ref(false)

function loginSuccess(token){
	user.setUserToken(token)
	if(user.beforeLoginUrl){
		if(user.beforeLoginUrl.includes('pagesub')){
			uni.redirectTo({url: user.beforeLoginUrl})
		}else{
			uni.switchTab({url: user.beforeLoginUrl});
		}
		user.setBeforeLoginUrl('')
	}else{
		uni.switchTab({url:'/pages/index/index'});
	}
	isLoading.value = false
}

function submitLogin(){
	uForm.value.validate().then(res => {
		// 登录
		isLoading.value = true
		// 虚拟登录
		if(form.username==='test'&&form.password==='qwe123456'){
			loginSuccess('a1b2c3d4f5g66h7j8k9l0')
		}else{
			isLoading.value = false
		}
		// login(form).then(res=>{
		// 	if(res&&res.data){
		// 		user.setUserToken(res.data.token)
		// 		uni.switchTab({url:'/tabber/index/index'})
		// 	}
		// }).finally(()=>isLoading.value = false)
	})
}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 252rpx 90rpx;
	box-sizing: border-box;
	background-color: #fff !important;
	.logo{
		width: 180rpx;
		height: 180rpx;
		background: #f0f6ff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 10rpx rgba(205, 205, 205, 0.7);
		image{
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			// border-radius: 50%;
		}
	}
	.formBox{
		width: 100%;
		margin-top: 66rpx;
		margin-bottom: 36rpx;
		.inputBox{
			height: 80rpx;
			padding-left: 40rpx !important;
		}
	}
	.tips{
		font-size: 24rpx;
		color: #2281FE;
		text-decoration:underline;
		margin-bottom: 36rpx;
	}
	.slot-content{
		width: 100%;
		padding: 40rpx;
	}
	.codeBox{
		width: 100%;
		padding: 20rpx !important;
	}
}
</style>